<template>
  <div class="createDevice">
    <div class="content">
      <div class="title">
        <span>创建设备</span>
      </div>
      <div class="input-item">
        <span>设备名称：</span>
        <a-input class="input-style" placeholder="请输入设备名称" />
      </div>
      <div style="padding-left: 42px;" class="input-item">
        <span>IP地址：</span>
        <a-input class="input-style" placeholder="请输入设备IP地址" />
      </div>
      <div class="input-item">
        <span>数据监控端口：</span>
        <a-input-number :min="1" class="input-style" placeholder="请输入数据监控端口" />
      </div>
      <div class="input-item">
        <span>描述：</span>
        <a-textarea class="input-style" placeholder="Basic usage" :rows="4" />
      </div>

      <div class="buttons-container">
        <div class="btns">
          <a-button type="primary" style="margin-right:24px">
            取消
          </a-button>
          <a-button>确认</a-button>
        </div>

      </div>

    </div>

  </div>
</template>


<style lang="less" scoped>
.createDevice {
  height: 100%;
  .content {
    height: 100%;
    padding: 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    .title {
      display: flex;
      justify-content: flex-start;
      span {
        font-size: 16px;
        font-family: MicrosoftYaHei;
        text-align: right;
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .input-item {
      margin-top: 24px;
      display: flex;
      justify-content: flex-start;
      span {
        line-height: 36px;
      }
      .input-style {
        width: 360px;
      }
    }
    .buttons-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .btns {
      }
    }
  }
}
</style>